<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-8">
      <!-- Card stats -->
      <div class="row">
        <div class="col-xl-3 col-lg-6">
          <stats-card
            ref="ref"
            title="会员数量"
            type="gradient-red"
            :sub-title="allMemberCount"
            icon="ni ni-active-40"
            class="mb-4 mb-xl-0"
          >
           <template slot="footer">
              <span class="text-success mr-2">
                <i class="fa fa-arrow-up"></i> {{allMemberCount}}
              </span>
              <span class="text-nowrap">截止当前</span>
            </template>
          </stats-card>
          
        </div>
        <div class="col-xl-3 col-lg-6">
          <stats-card
            title="朗读总数"
            type="gradient-orange"
            :sub-title="allRecordCount"
            icon="ni ni-chart-pie-35"
            class="mb-4 mb-xl-0"
          >
            <template slot="footer">
              <span class="text-success mr-2">
                <i class="fa fa-arrow-up"></i> {{allRecordCount}}
              </span>
              <span class="text-nowrap">朗读记录</span>
            </template>
          </stats-card>
        </div>
        <div class="col-xl-3 col-lg-6">
          <stats-card
            title="图文总数"
            type="gradient-green"
            :sub-title="allArticleCount"
            icon="ni ni-money-coins"
            class="mb-4 mb-xl-0"
          >
            <template slot="footer">
              <span class="text-danger mr-2">
                <i class="fa fa-arrow-down"></i> {{allArticleCount}}
              </span>
              <span class="text-nowrap">图文数量</span>
            </template>
          </stats-card>
        </div>
        <div class="col-xl-3 col-lg-6">
          <stats-card
            title="小队总数"
            type="gradient-info"
            :sub-title="allTeamCount"
            icon="ni ni-chart-bar-32"
            class="mb-4 mb-xl-0"
          >
            <template slot="footer">
              <span class="text-success mr-2">
                <i class="fa fa-arrow-up"></i> {{allTeamCount}}
              </span>
              <span class="text-nowrap">小队数量</span>
            </template>
          </stats-card>
        </div>
      </div>

      <!--Tables-->
      <div class="row mt-5">
        <div class="col-xl-8 mb-5 mb-xl-0">
          <page-visits-table></page-visits-table>
        </div>
        <div class="col-xl-4">
          <social-traffic-table></social-traffic-table>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-xl-8 mb-5 mb-xl-0"></div>
      </div>
      <!--End tables-->
    </base-header>

 
  </div>
</template>


<script>

// Tables
import SocialTrafficTable from "./Dashboard/SocialTrafficTable";
import PageVisitsTable from "./Dashboard/PageVisitsTable";

import { initDashBoardApi } from "@/config/api/dashboardservice";

export default {
  components: {
    PageVisitsTable,
    SocialTrafficTable
  },
  data() {
    return {
      allMemberCount: "0",
      allRecordCount:"0",
      allArticleCount:"0",
      allTeamCount:"0",
    };
  },
  methods: {
    //初始化面板
    async initDashBoard(){
      await initDashBoardApi().then(res=>{
        if(res.sucflag){
          this.allMemberCount=res.allMemberCount;
          this.allRecordCount=res.allRecordCount;
          this.allArticleCount=res.allArticleCount;
          this.allTeamCount=res.allTeamCount;
        }
      })
    }
  },
  mounted() {
    this.initDashBoard();
  },

  layout: "DashboardLayout"
};
</script>
